/* Basic sample */

@import url('./_mixins.less');
* {
    box-sizing: border-box;
}

html,
body {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; // -webkit-user-select: none;
    // -moz-user-select: none;
    // -ms-user-select: none;
    // user-select: none;
}

body {
    font-family: "Microsoft JhengHei", "Microsoft Yahei";
    overflow-x: hidden;
    background-color: #fff; // width:100%;
    // height:100%;
    margin: 0;
    padding: 0;
}

html,
body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img table,
tr,
th,
td,
strong,
b,
em,
i,
button {
    margin: 0;
    padding: 0; // font-size: 14px;
    font-weight: normal;
    font-style: normal;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    border: none;
}

.clearfix {
    zoom: 1;
}

.clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
}

html,
body {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; // -webkit-user-select: none;
    // -moz-user-select: none;
    // -ms-user-select: none;
    // user-select: none;
}

body {
    font-family: "Microsoft JhengHei", "Microsoft Yahei";
    overflow-x: hidden;
    background-color: #fff; // width:100%;
    // height:100%;
    margin: 0;
    padding: 0;
    color: @color-font-grey;
}

.framework7-root,
body,
html {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden
}

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    width: 100%;
    background: #fff;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased
}

.framework7-root {
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.framework7-initializing *,
.framework7-initializing :after,
.framework7-initializing :before {
    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important
}

.view,
.views {
    position: relative;
    height: 100%;
    z-index: 5000;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.pages {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.page {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    contain: layout size style;
    background: #fff;
}

.page.stacked {
    display: none
}

.page-previous {
    pointer-events: none
}

.page-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    z-index: 1;
    contain: layout size style;
    will-change: scroll-position; // max-width: 750px;
    margin: auto;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

a {
    &:hover {
        // .transition(100ms);
    }
}

/* === animated === */

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes slide {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translate(30%, 0);
        -webkit-transform: translate(30%, 0);
        -moz-transform: translate(30%, 0);
        -ms-transform: translate(30%, 0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    animation-duration: 300ms;
}